import { Main } from "./main";
import * as THREE from 'three'

export class TouchLine {
    private main: Main
    // 实际尺寸
    public realWidth: number
    public realHeight: number

    // 逻辑尺寸
    public logicWidth: number
    public logicHeight: number

    public plane!: THREE.Mesh

    public screenRect = {} as any

    public isActive: boolean = false
    constructor(main: Main, realWidth: number, realHeight: number) {
        this.main = main
        this.realWidth = realWidth
        this.realHeight = realHeight

        this.logicWidth = this.main.originWidth
        this.logicHeight = this.realHeight * this.logicWidth / this.realWidth

        this.initScreenRect()

        this.ensureLoaded()
    }

    private initScreenRect() {
        // 屏幕尺寸
        this.screenRect.width = window.innerWidth
        this.screenRect.height = this.realHeight * window.innerWidth / this.realWidth

        // touchLine的左上角坐标
        this.screenRect.left = 0
        this.screenRect.top = (window.innerHeight - this.screenRect.height) / 2
    }

    public isHover(touch: MouseEvent) {
        let isHover = false
        if (touch.clientY >= this.screenRect.top && touch.clientY <= this.screenRect.top + this.screenRect.height && touch.clientX >= this.screenRect.left && touch.clientX <= this.screenRect.left + this.screenRect.width) {
            isHover = true;
        }
        return isHover
    }

    public enble() {
        this.isActive = true
    }

    public disable() {
        this.isActive = false
    }

    move(y: number) {
        if (this.isActive) {
            if (y < window.innerHeight * this.main.minPercent || y > window.innerHeight * (1 - this.main.minPercent)) {
                if (y < window.innerHeight * this.main.minPercent) {
                    y = window.innerHeight * this.main.minPercent;
                } else {
                    y = window.innerHeight * (1 - this.main.minPercent);
                }
            }

            let len = this.screenRect.top + this.screenRect.height / 2 - y;//屏幕移动距离
            this.screenRect.top = y - this.screenRect.height / 2;

            let percent = len / window.innerHeight;
            let len2 = this.main.originHeight * percent;
            this.plane.position.y += len2;
        }
    }



    private _loader(): Promise<void> {
        const loader = new THREE.TextureLoader()
        return new Promise((resolve, reject) => {
            loader.load('../../../public/img/touch-line.png', (texture) => {
                const geometry = new THREE.PlaneGeometry(this.logicWidth, this.logicHeight)
                const material = new THREE.MeshBasicMaterial({
                    map: texture,
                    transparent: true
                })
                const mesh = new THREE.Mesh(geometry, material)
                mesh.position.set(0, 0, 0)
                this.plane = mesh
                this.main.scene.add(this.plane)
                this.main.render()
                resolve()

            }, undefined, err => { reject(err) })
        })
    }

    public async ensureLoaded(): Promise<void> {
        await this._loader();
    }
}